<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择照片" prop="file" ref="uploadElement">
        <!-- <el-upload
          :on-change="handlePictureCardPreview"
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :on-preview="lookpic"
          :on-remove="handleRemove"
        >
        </el-upload> -->
        <img v-if="imageUrl" :src="imageUrl" class="avatar" @click="kankan" />
        <el-button @click="uploadd" v-if="!imageUrl">上传</el-button>
        <input type="file" ref="ff" @change="cc" style="display: none" />
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="imageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <!-- 图片2 -->
      <!-- <el-form-item label="请选择照片" prop="file" ref="uploadElement2">
        <img
          v-if="imageUrl2"
          :src="imageUrl2"
          class="avatar"
          @click="kankan2"
        />
        <el-button @click="uploadd2" v-if="!imageUrl2">上传</el-button>
        <input
          type="file"
          ref="ff2"
          @change="cc2($event, 2)"
          style="display: none"
        />
        <el-dialog :visible.sync="dialogVisible2">
          <img width="100%" :src="imageUrl2" alt="" />
        </el-dialog>
      </el-form-item> -->

      <el-form-item label="即时配送" prop="delivery">
        <el-switch v-model="ruleForm.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活动形式" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "",
      imageUrl2: "",
      ruleForm: {
        file: "",
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        doUpload: false,
        btnFlag: true,
      },
      dialogVisible: false,
      dialogVisible2: false,
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        file: [{ required: true, message: "请上传图片" }],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  methods: {
    uploadd() {
      this.$refs.ff.click();
    },
    // uploadd2() {
    //   this.$refs.ff2.click();
    // },
    cc(ev) {
      var reader = new FileReader();
      reader.readAsDataURL(ev.target.files[0]); //ev.target.files[0]
      reader.onload = (event) => {
        console.log(event.target.result);
        this.imageUrl = event.target.result; //base64
        console.log(this.imageUrl, 1111);
        if (this.imageUrl) this.doUpload = true;
        this.rules.file = [{ required: true, message: "请上传图片" }];
        if (this.doUpload) {
          this.rules.file = [];
          this.$refs["uploadElement"].clearValidate();
        }
      };
    },
    cc2(ev, num) {
      var reader = new FileReader();
      reader.readAsDataURL(ev.target.files[0]); //ev.target.files[0]
      reader.onload = (event) => {
        this["imageUrl" + num] = event.target.result; //base64

        if (this["imageUrl" + num]) this["doUpload2" + num] = true;
        this.rules.file = [{ required: true, message: "请上传图片" }];
        if (this["doUpload" + num]) {
          this.rules.file = [];
          this.$refs["uploadElement" + num].clearValidate();
        }
      };
    },
    kankan() {
      this.dialogVisible = true;
    },
    kankan2() {
      this.dialogVisible2 = true;
    },
    // handlePictureCardPreview(file) {
    //   this.doUpload = true;
    // },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("成功");
        } else {
          console.log("失败");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
